<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <script src="/js/login.js"></script>
    <script src="/js/txx.js"></script>
    <style>
        .brand-link {
            margin: 0 10px;
            cursor: pointer;
        }
        .brand-link.selected {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="app">
    <txx>
        <nav class="c900 flex" style="margin: 10px auto 0px">
            <div class="flex" style="justify-content: center;">
                <!-- 修改品牌链接，绑定点击事件和样式 -->
                <el-link
                        :underline="false"
                        v-for="brand in brands"
                        :key="brand.name"
                        :class="{ 'brand-link': true, 'selected': brand.selected }"
                        @click="toggleBrand(brand)"
                >
                    {{ brand.name }}
                </el-link>
            </div>
            <el-input placeholder="搜索关键字" style="width: 250px" v-model="name">
                <el-button slot="append" icon="el-icon-search" @click="serchCars"></el-button>
            </el-input>
        </nav>
        <main class="c900 flex" style="background-color: transparent; padding: 0px; justify-content: flex-start">
            <div v-for="row in carRows" style="display: flex">
                <div v-for="car in row" class="car">
                    <img :src="car.image">
                    <div>
                        <div class="price">￥{{car.price}}<small>元/天</small></div>
                        <el-rate v-model="car.rate"></el-rate>
                        <p>{{car.brand}}<br><small>{{car.model}}</small></p>
                        <a class="abtn" :href="'detail.html?id='+car.id">租 赁</a>
                    </div>
                </div>
            </div>
            <div style="width: 100%; text-align: center; margin-top: 10px" v-if="total > cars.length">
                <el-button type="primary" round @click="getMore">更多车辆</el-button>
            </div>
            <div style="width: 100%; text-align: center; margin-top: 10px" v-else>
                <el-button type="primary" round>暂无更多车辆</el-button>
            </div>
        </main>
    </txx>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            rate: 3.5,
            brands: [], // 品牌数据，包含名称和选中状态
            total: 0,
            size: 4,
            current: 1,
            cars: [],
            carRows: [], // 用于存储分组的车辆数据
            name: "", // 搜索关键字 brand或model
            selectedBrands: [], // 选中的品牌列表
        },
        methods: {
            // 获取品牌数据
            getBrands() {
                axios.get("txxcar/getBrands").then(res => {
                    if (res.data.code == 1) {
                        // 初始化品牌数据，添加选中状态
                        this.brands = res.data.data.map(brand => ({
                            name: brand,
                            selected: false,
                        }));
                    } else {
                        alert("查询失败");
                    }
                });
            },
            // 获取车辆数据
            getCars() {
                axios.get("txxcar/getCars", {
                    params: {
                        size: this.size,
                        current: this.current,
                        name: this.name,
                        brands: this.selectedBrands.join(","), // 将选中的品牌作为搜索条件
                    }
                }).then(res => {
                    if (res.data.code == 1) {
                        this.cars = this.cars.concat(res.data.data.records);
                        this.total = res.data.data.total;
                        this.groupCars(); // 分组车辆数据
                    } else {
                        alert("车辆数据获取失败");
                    }
                });
            },
            // 加载更多车辆
            getMore() {
                this.current++;
                this.getCars();
            },
            // 分组车辆数据
            groupCars() {
                this.carRows = [];
                for (let i = 0; i < this.cars.length; i += 4) {
                    this.carRows.push(this.cars.slice(i, i + 4));
                }
            },
            // 搜索车辆
            serchCars() {
                this.cars = [];
                this.current = 1;
                this.getCars();
            },
            // 切换品牌选中状态并触发搜索
            toggleBrand(brand) {
                brand.selected = !brand.selected;
                // 更新选中的品牌列表
                if (brand.selected) {
                    this.selectedBrands.push(brand.name);
                } else {
                    this.selectedBrands = this.selectedBrands.filter(b => b !== brand.name);
                }
                // 触发搜索
                this.cars = [];
                this.current = 1;
                this.getCars();
            },
        },
        mounted() {
            this.getBrands();
            this.getCars();
        },
    });
</script>
</body>
</html>